
$(function () {
    $('.left li').click(function () {
        $(this).parent().find('li').removeClass('cur')
        $(this).addClass('cur')

        var tmpType = $(this).find('a').data('type') 
        var tmPdata = arrAllProducts.find(function (item) {
            if (item.type == tmpType) {
                return item
            }
        })
        initPList(tmPdata.products)
    })
    var arrAllCart = []
    $('#pList').on('click', '.p-add', function () {
        var tmpId = $(this).data('pid');
        dalPNum('add',tmpId);
    })

    $('#pList').on('click', '.p-reduce', function () {
        var tmpId = $(this).data('pid')
        dalPNum('reduce',tmpId)
    })

    function dalPNum(type,tmpId) {
        var $tagPNum = $('#pNum' + tmpId); 
        var tmpNum = Number($tagPNum.data('pnum'))

        if(type == 'add') {
            tmpNum += 1 
        }else {
            tmpNum -= 1 
        }

        if(tmpNum < 0) {
            return;
        }
        $tagPNum.data('pnum',tmpNum)
        $tagPNum.text(tmpNum) 

        var obj = {};
        obj.pid = tmpId;  
        obj.count = tmpNum; 
        obj.price = Number($tagPNum.data('price')) 
        var pIndex = arrAllCart.findIndex(function(item) {
            return item.pid == obj.pid
        })
        if(pIndex > -1) {
            arrAllCart[pIndex] = obj 
        }else {
            arrAllCart.push(obj); 
        }
        console.dir(arrAllCart)
       var sumCount = 0;
        var sumPrice = 0;
        arrAllCart.forEach(function(item) {
            sumCount += item.count 
            sumPrice += (item.count * item.price)
        })
        $('#sumPCouent').text(sumCount)
        $('#sumPPrice').text(sumPrice.toFixed(2)) 
    }




    function initPList(data) {
        var strHtml = "";
        data.forEach(function (item) {
            var temP = arrAllCart.find(function (p) {
                return p.pid == item.id
            })
          
            var temCount = 0;
            if (temP) {
                temCount = temP.count;
            }


            strHtml += `
                       <li class="li">
                        <div class="product-item">
                            <img class="product-img" src="${item.img}" alt="${item.name}">
                            <h4 class="product-title">${item.name}</h4>
                            <p class="product-desc">${item.desc}</p>    
                            <span class="product-price"><i>${item.price}</i>元</span>                        
                            <div class="action">
                                <a href="javascript:void(0)" data-pid="${item.id}" 
                                class="p-btn-car p-reduce">-</a>
                                <span class="p-num" id="pNum${item.id}" data-pid="${item.id}" 
                                data-price="${item.price}" data-pnum="${temCount}">${temCount}</span>
                                <a href="javascript:void(0)" data-pid="${item.id}" class="p-btn-car p-add">+</a>
                            </div>
                        </div>
                    </li>
                        `
        })
        $('#pList').html(strHtml)
    }
    initPList(arrAllProducts[0].products)
$('.btn-sure-order').click(function(){
    $.cookie('shopcart',JSON.stringify(arrAllCart),{path:'/',expires:7})
    window.location.href = 'order.html'
})

})